<template>
  <el-radio-group class="radio-tab" v-model="checkedVal">
    <el-radio
      class="radio-cell"
      v-for="(item, index) in optionsData"
      :key="index"
      :label="item.value"
      :value="item.value">
      <el-tooltip popper-class="radio-tooltip" effect="light" :content="item.label" placement="bottom">
        <i class="radio-pic icon-radius-none" :class="item.icon"></i>
      </el-tooltip>
    </el-radio>
  </el-radio-group>
</template>

<script>
export default {
  name: 'EnRadioTab',
  props: ['optionsData', 'defaultData'],
  model: {
    event: 'change'
  },
  data() {
    return {
      checkedVal: this.defaultData
    }
  },
  watch: {
    defaultData (newVal) {
      this.checkedVal = newVal;
    },
    checkedVal (newVal) {
      this.$emit('change', newVal);
    }
  }
}
</script>

<style type="text/scss" lang="scss">
.radio-tab {
  display: flex;
  /deep/ .radio-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 50px;
    height: 32px;
    margin-left: -1px;
    margin-right: 0;
    line-height: 30px;
    border: solid 1px #e6e6e6;
    cursor: pointer;
    color: #999;
    &:first-child {
      margin-left: 0;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
    }
    &:last-child {
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
    }
    .el-radio__input {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: -1;
      opacity: 0;
    }
    .el-radio__label,
    .radio-pic {
      display: flex;
      justify-content: center;
      align-items: center;
      padding-left: 0;
      width: 100%;
      height: 100%;
      font-size: 18px;
    }
    &.is-checked {
      z-index: 1;
      border-color: #3870EA;
      background: rgba(56, 112, 234, .2);
      .radio-pic {
        color: #3870EA;
      }
    }
  }
}
.radio-tooltip {
  &.el-tooltip__popper {
    border-radius: 2px;
    border-color: #fff;
    box-shadow: 0 0 14px 0 rgba(0,0,0,.1);
    .popper__arrow {
      border-color: #fff;
      background: #fff;
      &::after {
        border-color: #fff;
        background: #fff;
      }
    }
  }
}
</style>